<template>
  <el-cascader
      v-model="selectData"
      :options="options"
      :props="optionProps"
      :filterable="filterable"
      :change-on-select="changeOnSelect"
      :show-all-levels="showAllLevels"
      :clearable="clearable"
      :disabled="disabled"
      :placeholder="placeholder"
      @change="change"
      class="cascader-select"
  ></el-cascader>
</template>

<script>
export default {
  name: "Cascader",
  props: {
    value: {
      type: String,
      default: null
    },
    options: {
      type: Array,
      default: () => []
    },
    optionProps: {
      type: Object,
      default: () => ({
        value: "value",
        label: "label",
        children: "children",
        emitPath: false
      })
    },
    filterable: {
      type: Boolean,
      default: true
    },
    changeOnSelect: {
      type: Boolean,
      default: true
    },
    showAllLevels: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: "请选择"
    }
  },
  data() {
    return {
      selectData: null,
    }
  },
  watch: {
    value: {
      handler(val) {
        this.selectData = val;
      },
      immediate: true
    }
  },
  methods: {
    change(val) {
      this.$emit('change', val);
      this.$emit('input', val);
    }
  }
}
</script>

<style lang="scss" scoped>
.cascader-select {
  width: 100%;
}
</style>
